import { Text, View } from '@tarojs/components'
import { useState } from 'react'
import classNames from 'classnames'
import './index.scss'
import { UserTreasuryCheckin } from '@/types'
import { useMount } from '@/hooks'
import { getTreasuryCheckinRecordList } from '../../network'
import { useAppSelector } from '@/store/hooks'
import to from 'await-to-js'

const CheckinRecordOverview = () => {
  return (
    <View className='checkin-record-overview border-bottom-20'>
      <View className='row-start-center bg-primary pv-medium'>
        <View className='checkin-continuous-days column-start-center flex-1'>
          <View><Text className='text-large-succsess'>7</Text><Text className='text-small-primary ml-small'>天</Text></View>
          <View className='text-small-primary mt-small'>连续签到天数</View>
        </View>
        <View className='checkin-record-overview-divider' />
        <View className='text-title flex-1 text-center'>今日签到：56人</View>
      </View>
      <View className='row-start-center bg-primary pv-medium'>
        <View className='checkin-continuous-days column-start-center flex-1'>
          <View><Text className='text-large-succsess'>7</Text><Text className='text-small-primary ml-small'>天</Text></View>
          <View className='text-small-primary mt-small'>累计签到</View>
        </View>
        <View className='checkin-record-overview-divider' />
        <View className='text-title flex-1 text-center'>今日排名：33名</View>
      </View>
    </View>
  )
}


const CheckinRecordItem = ({ className, recordItem }) => {
  return (
    <View className={classNames('checkin-record-item row-start-center p-medium bg-primary primary', className)}>
      <View className='index'>{ recordItem.index }</View>
      <View className='name'>{ recordItem.name }</View>
      <View className='checkin-time'>{ recordItem.checkinTime }</View>
      <View className='checkin-days'>{ recordItem.score }</View>
    </View>
  )
}

export default function TreasuryCheckinRecordScene() {
  const [checkinRecordList, setCheckinRecordList ] = useState<UserTreasuryCheckin[]>([])

  const treasuryId = useAppSelector(state => state.treasury.userTreasury.treasuryId)

  useMount(async () => {
    const [err, checkinRecordList] = await to(getTreasuryCheckinRecordList(treasuryId, {size: 10, page: 0}))
    if (err) return 
    setCheckinRecordList(checkinRecordList)
  })

  return (
    <View className='treasury-checkin-record-scene vh-100 column-start-start'>
      <CheckinRecordOverview />
      <CheckinRecordItem
        className='font-size-medium'
        recordItem={{ index: '排名', name: '成员', checkinTime: '签到时间', score: '连续天数' }}
      />
    </View>
  )
}
